<template>
	<view>
		<view class='com-selectBox'>
			<view class='com-sContent' @tap='selectToggle' :style="{'border-radius':selectShow? '20rpx 20rpx 0 0' : '20rpx'}">
				<view v-if="propColor == 1" class='com-sTxt'>{{nowText}}</view>
				<view v-else-if="propColor == 2" class='com-sTxt'>{{nowText2}}</view>
				<view v-else class='com-sTxt'>{{nowText3}}</view>
				<image src='../../static/images/down.png' class='com-sImg' :animation="animationData"></image>
			</view>
			<view class='com-sList' v-if="selectShow" :style="{'background-color':propColor == 1 ? '#3A3A52' :'#535178'}">
				<view v-for="(item,index) in propArray" :data-index="index" :key="index" :data-item="item" class='com-sItem' @tap='setText'>{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectShow: false, //初始option不显示
				nowText: "全部分类", //初始内容
				nowText2: "全部区域",
				nowText3: "选择时长",
				animationData: {} //右边箭头的动画
			}
		},
		props: {
			propArray: {
				type: Array,
			},
			propColor: {
				type: String,
			},
			isShowSelect: {
				type: Boolean
			}
		},
		watch: {
			isShowSelect(val) {
				console.log(val)
				this.nowText2 = "全部区域"
				this.selectShow = false;
			}
		},
		onShow() {

		},
		created() {
			// console.log(this.propArray,'propArray')
		},
		mounted() {

		},
		onPageShow: function() { //onPageShow、onPageHide、onPageResize就可以分别对应小程序组件里pageLifetimes的 show、hide、resize
			this.setData({
				selectShow: false
			})
		},
		onPageHide: function() {

		},
		onPageResize: function() {

		},
		methods: {
			setData(obj) { //转换this.xxx = xxxx
				const keys = Object.keys(obj);
				keys.forEach((key) => {
					this[key] = obj[key];
				});
			},
			//option的显示与否
			selectToggle: function() {
				var nowShow = this.selectShow; //获取当前option显示的状态
				//创建动画
				var animation = wx.createAnimation({
					timingFunction: "ease"
				})
				this.animation = animation;
				if (nowShow) {
					animation.rotate(0).step();
					this.setData({
						animationData: animation.export()
					})
				} else {
					animation.rotate(180).step();
					this.setData({
						animationData: animation.export()
					})
				}
				this.setData({
					selectShow: !nowShow
				})
			},
			//设置内容
			setText: function(e) {
				var nowData = this.propArray; //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
				var bgcolor = this.propColor;
				console.log(bgcolor);
				var nowIdx = e.target.dataset.index; //当前点击的索引
				var nowText = nowData[nowIdx].text; //当前点击的内容
				//再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
				this.animation.rotate(0).step();
				if (bgcolor == 1) {
					this.setData({
						selectShow: false,
						nowText: nowText,
						animationData: this.animation.export()
					});
				} else if (bgcolor == 2) {
					this.setData({
						selectShow: false,
						nowText2: nowText,
						animationData: this.animation.export()
					});
				} else {
					this.setData({
						selectShow: false,
						nowText3: nowText,
						animationData: this.animation.export()
					});
				}
				let info = e.currentTarget.dataset.item; //当前点击的选项
				if (info) {
					let iteminfo = info;
					this.$emit('selectClick', iteminfo)
				}
			}
		}
	}
</script>

<style scoped>
	.com-selectBox {
		/* width: 200rpx; */
		width: 80%;
		z-index: 999999;
	}

	.com-sContent {
		/* border: 1px solid #e2e2e2; */
		font-size: 30rpx;
		position: relative;
		/* height: 44rpx; */
		/* line-height: 44rpx; */
		display: flex;
		justify-content: center;


		border-radius: 20rpx;
		border: 1rpx solid #fff;
		margin-top: 14rpx;
		margin-bottom: 13rpx;
		padding: 10rpx 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		min-height: 60rpx;
		color: #ffffff;
		margin-left: 20rpx;
		width: 100%;
		/* font-size: 16px; */
	}

	.com-sImg {
		position: absolute;
		/* right: 10rpx; */
		right: 20rpx;
		/* top: 21%; */
		top: 30%;
		width: 25rpx;
		height: 32rpx;
		/* margin-top: 10rpx;
	    margin-left: 6rpx; */
		transition: all .3s ease;
	}

	.com-sTxt {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30rpx;
		color: #ffffff;
	}

	.com-sList {
		/* width: inherit; */
		width: 69.5%;
		left: 120rpx;
		position: absolute;
		border: 1px solid #e2e2e2;
		border-top: none;
		box-sizing: border-box;
		z-index: 999999;
		max-height: 180rpx;
		overflow: auto;
		border-radius: 0 0 15rpx 15rpx;
		/* background-color: #3A3A52; */
	}

	.com-sItem {
		height: 44rpx;
		line-height: 44rpx;
		border-top: 1px solid #e2e2e2;
		padding: 0 6px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30rpx;
		color: #ffffff;
	}

	.com-sItem:first-child {
		border-top: none;
	}
</style>
